<script setup>
const notices = [
  '【系统升级】本周五晚23:00-24:00将进行系统维护',
  '【新功能】支持多门店数据统计',
  '【通知】请及时处理待办订单'
]
</script>
<template>
  <div>
    <div class="notice-title">公告</div>
    <ul class="notice-list">
      <li v-for="item in notices" :key="item">
        <span class="notice-dot"></span>
        <span class="notice-text">{{ item }}</span>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.notice-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 6px;
}
.notice-list {
  padding-left: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.8;
  list-style: none;
}
.notice-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
  cursor: pointer;
}
.notice-list li:last-child {
  border-bottom: none;
}
.notice-list li:hover {
  background: #f5f7fa;
}
.notice-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #409eff;
  margin-right: 8px;
  flex-shrink: 0;
}
.notice-text {
  flex: 1;
  word-break: break-all;
}
</style> 